<template>
    <div class="faultRecords">
        <div class="header">
            <span class="colorWhite">时间</span>
            <el-button plain @click="queryWithDate('day')">当日</el-button>
            <el-button plain @click="queryWithDate('week')">本周</el-button>
            <el-button plain @click="queryWithDate('month')">本月</el-button>
            <el-date-picker
                class="datePicker"
                v-model="stopBeginTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button>
        </div>

        <div class="main">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column
                    prop="deviceId"
                    label="设备编号">
                </el-table-column>
                <el-table-column
                    prop="deviceName"
                    label="设备名称">
                </el-table-column>
                <el-table-column
                    prop="department"
                    label="基地">
                </el-table-column>
                <el-table-column
                    prop="ProductionLineName"
                    label="产线">
                </el-table-column>
                <el-table-column
                    prop="failureName"
                    label="故事/事故名称">
                </el-table-column>
                <el-table-column
                    prop="stopBeginTime"
                    label="停机开始时间">
                </el-table-column>
                <el-table-column
                    prop="stopEndTime"
                    label="停机结束时间">
                </el-table-column>
                <el-table-column
                    prop="specialtyProp"
                    label="专业属性">
                </el-table-column>
                <el-table-column
                    prop="failureGrade"
                    label="事故等级">
                </el-table-column>
                <el-table-column
                    prop="dutyUserName"
                    label="责任人">
                </el-table-column>
                <el-table-column
                    prop="correctiveAction"
                    label="纠正措施">
                </el-table-column>
            </el-table>
            <el-pagination
              v-if="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next"
              :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import api from './../../../common/js/api';
import { mapState } from 'vuex';
import moment from 'moment';
export default {
  data () {
    return {
      tableData: [],
      stopBeginTime: [],
      currentPage: 1,
      pagesize: 10,
      total: ''
    };
  },
  mounted () {
    this.search();
  },
  computed: {
    ...mapState('resource', [
      'devices',
      'domains',
      'currentResourceId'
    ])
  },
  methods: {
    queryWithDate: function (type) {
      let typeMap = {
        day: [
          moment(moment().startOf('day')),
          moment(moment().endOf('day'))
        ],
        week: [
          moment(moment().startOf('isoWeek')),
          moment(moment().endOf('isoWeek'))
        ],
        month: [
          moment(moment().startOf('month')),
          moment(moment().endOf('month'))
        ]
      };
      this.stopBeginTime = typeMap[type];
      this.search();
    },
    search: function () {
      var params = [
        this.currentResourceId,
        {
          stopBeginTime: this.stopBeginTime
        }
      ];
      api.post('deviceResumeUIService.getDeviceFaultResumeListByDeviceId', params).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    }
  },
  watch: {
    currentResourceId: function (val) {
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.faultRecords{
  .header{
    padding: 10px;
    margin: 5px;
    border: 1px solid #25729d;
    .colorWhite{
      color: #fff;
      margin: 0 10px;
    }
    .datePicker{
      margin: 0 10px;
    }
  }
  .main{
    padding: 10px;
    margin: 5px;
    border: 1px solid #25729d;
  }
}
</style>
